<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c"   uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <%@include file="/include/head.jsp"%>
    <title>待预约</title>
</head>
<body>
<header class="mui-bar mui-bar-nav qy-bg-white">
    <a class="mui-icon mui-icon-back qy-text-black" href="/customer/center.do"></a>
    <h1 class="mui-title qy-text-black qy-font-size-20px">待预约</h1>
</header>
<div class="mui-content">
    <div v-for="order in orders">
        <div class="mui-row qy-bg-white qy-padding-vertical-8px qy-padding-horizontal-4px qy-margin-top-8px qy-font-size-12px qy-text-label">
            <span class="mui-col-xs-6 ">{{order.shopName}}</span>
            <span class="mui-col-xs-6 qy-text-right">预约时间<i class="qy-icon-downArrowSolid"></i></span>
        </div>
        <div v-for="product in order.products" class="mui-row qy-border-bottom qy-bg-white qy-padding-vertical-8px qy-padding-horizontal-4px">
            <div class="mui-col-xs-3">
                <img :src="product.pImg" width="100%" height="72px" />
            </div>
            <div class="mui-col-xs-9 qy-padding-left-8">
                <div class="qy-font-size-22px">{{product.pName}}</div>
                <div class="qy-text-red">
                    <span class="qy-font-size-12px">&yen;</span>
                    <span class="qy-font-size-18px">{{product.pPrice}}</span>
                </div>
                <div class="qy-flex qy-flex-text-between">
                    <span class="qy-font-size-12px qy-text-label">{{product.pTime}}</span>
                    <span @click="product.isShowInfo=!product.isShowInfo" v-if="product.isShowInfo" class="mui-btn mui-btn-warning mui-btn-outlined qy-padding-horizontal-4px qy-padding-vertical-12px">收起</span>
                    <span @click="product.isShowInfo=!product.isShowInfo" v-else class="mui-btn mui-btn-warning mui-btn-outlined qy-padding-horizontal-4px qy-padding-vertical-12px">预约</span>
                </div>
            </div>
            <div v-show="product.isShowInfo" class="mui-col-xs-12">
                <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                    <div class="qy-flex qy-font-size-16px qy-text-black">体检人姓名</div>
                    <div class="qy-flex qy-flex-text-right">
                        <input type="text" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px" placeholder="请输入体检人真实姓名"/>
                        <small class="qy-icon-rightArrow"></small>
                    </div>
                </div>
                <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                    <div class="qy-flex qy-font-size-16px qy-text-black">体检人性别</div>
                    <div class="qy-flex qy-flex-text-right">
                        <input type="text" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px" readonly="readonly" value="男" />
                        <small class="qy-icon-rightArrow"></small>
                    </div>
                </div>
                <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                    <div class="qy-flex qy-font-size-16px qy-text-black">体检人联系电话</div>
                    <div class="qy-flex qy-flex-text-right">
                        <input type="text" maxlength="11" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px"  placeholder="请输入有效联系电话"/>
                        <small class="qy-icon-rightArrow"></small>
                    </div>
                </div>
                <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                    <div class="qy-flex qy-font-size-16px qy-text-black">体检人年龄</div>
                    <div class="qy-flex qy-flex-text-right">
                        <input type="text" maxlength="3" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px" placeholder="请输入体检人年龄"/>
                        <small class="qy-icon-rightArrow"></small>
                    </div>
                </div>
                <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                    <div class="qy-flex qy-font-size-16px-text-black">体检人身份证号</div>
                    <div class="qy-flex qy-flex-text-right">
                        <input type="text" maxlength="18" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px" placeholder="请输入体检人身份证号"/>
                        <small class="qy-icon-rightArrow"></small>
                    </div>
                </div>
                <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                    <div class="qy-flex qy-font-size-16px qy-text-black">体检人预约体检时间</div>
                    <div class="qy-flex qy-flex-text-right">
                        <input type="text" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px qy-padding-vertical-4px" placeholder="选择体检时间"/>
                        <small class="qy-icon-rightArrow"></small>
                    </div>
                </div>
                <div class="qy-bg-white qy-padding-horizontal-4px qy-text-center">
                    <input type="button" value="确认预约" class="qy-no-border qy-text-blue qy-font-size-21px"/>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" charset="utf-8" src="${rootPath}/static/js/UnSubscribe.js"></script>